<template>
	<view style="height: 95vh;">
		<!-- 顶部 -->
		<u-sticky>
			<view class="topWrapper">
				<view class="searchBox">
					<view class="search">
						<u--input v-model="inputValue" clearable border="none" fontSize="12" placeholder="请输入品牌/车系/车型"
							@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" />
					</view>
				</view>
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" top="100">
			<u-radio-group v-model="planId">
				<view class="item" v-for="(item, index) in carList" :key="item.planId">
					<view style="display: flex;align-items: center;" @click="checkedCar(item)">
						<view style="display: inline-block;width: 10%;" v-if="item.carNum>0">
							<!-- <u-radio active-color="#1573FF" :name="item.planId"> </u-radio> -->
							<image v-if="item.selected" style="width: 40rpx;height: 40rpx;" src="/static/other/radio_selected.png"></image>
							<image v-else style="width: 40rpx;height: 40rpx;" src="/static/other/radio_default.png"></image>
						</view>
						<view style="display: inline-block;width: 90%;">
							<view class="text-line">
								<text class="text-name">车型信息:</text>
								<text class="text-value">{{item.modelInfo|filterNull}}</text>
							</view>

							<view class="text-line">
								<text class="text-name">座位数:</text>
								<text class="text-value">{{item.seating|filterNull}}</text>
							</view>

							<view class="text-line">
								<text class="text-name">可租车辆:</text>
								<text class="text-value">{{item.carNum|filterNull}}</text>
							</view>

							<view class="text-line">
								<text class="text-name">运营类型:</text>
								<text class="text-value">{{item.operatingClassification|filterNull}}</text>
							</view>

<!--							<view class="text-line">-->
<!--								<text class="text-name">均价:</text>-->
<!--								<text class="text-value">{{item.averagePrice|filterNull}}</text>-->
<!--							</view>-->

						</view>
					</view>
				</view>
			</u-radio-group>
		</mescroll-body>
		<button type="info" class="sub-btn" @click="confimCar">确定</button>

		<u-popup :show="showPlan" @close="showPlan = false" closeable @touchmove.stop.prevent="moveHandle">
			<view class="planWrapper">
				<view class="planTitle"><text>租车方案选项</text></view>
				<scroll-view scroll-y="true">
					<view class="planListBox">
						<view class="planList" :class="{active: currentPlanIndex == index}"
							v-for="(plan, index) in planList" :key="index" @tap="choosePlan(plan)">
							<text class="name">{{plan.mealName}}</text>
							<text class="price">{{plan.averagePrice}}日均</text>
							<text v-if="plan.remark.length > 0" class="remark">{{plan.remark}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		classificationMoldelList,
		modelMealList,
		confirmationOrder
	} from '@/api/home-api.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				inputValue: '',
				isSearch: false,
				showPlan: false,
				takeStoreId: '',
				alsoStoreId: '',
				rentalType: 1,
				startTime: '',
				endTime: '',
				differentStoresCar: 2,
				currentPlanIndex: 0,
				carList: [],
				carInfo: {},
				planId: '',
				planList: [],
				takeLat: null, //取车经度
				takeLon:  null, //取车纬度
				alsoLat:  null, //还车经度
				alsoLon:  null, //还车纬度

			}
		},
		onLoad(op) {
			console.log(op);
			this.takeStoreId = op.takeStoreId;
			this.alsoStoreId = op.alsoStoreId;
			this.startTime = op.rentalStartTime;
			this.endTime = op.rentalEndTime;
			this.rentalType = op.rentalType;
			this.differentStoresCar = op.differentStoresCar;
			this.takeLat= op.takeLat; //取车经度
			this.takeLon= op.takeLon; //取车纬度
			this.alsoLat= op.alsoLat; //还车经度
			this.alsoLon= op.alsoLon; //还车纬度
		},

		methods: {
			upCallback(page) {
				classificationMoldelList(this.toParams({
					storeId: this.takeStoreId,
					startTime: this.startTime,
					endTime: this.endTime,
					pageNum: page.num,
					pageSize: page.size,
					modelName : this.inputValue
				})).then(res => {
					//设置列表数据
					if (page.num == 1) this.carList = []; //如果是第一页需手动制空列表
					this.carList = this.carList.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
				this.inputValue = value;
				this.mescroll.triggerDownScroll();
			},
			//选择车辆
			checkedCar(item) {
				this.planId = item.planId;
				this.carList.map(car=>{
					if(item.planId == car.planId) {
						car.selected = true;
					}else {
						car.selected = false;
					}

				})
				this.carInfo = item;
			},
			// 确定车辆
			confimCar() {
				if (this.$u.test.isEmpty(this.planId)) {
					this.$u.toast('请选择车型');
					return
				}
				this.choosePlan();
			},

			// 选择方案
			choosePlan() {
				confirmationOrder({
					planId: this.planId,
					startTime: this.startTime,
					endTime: this.endTime,
					planMealId: null,
					differentStoresCar: this.differentStoresCar,
					takeStoreId: this.takeStoreId,
					alsoStoreId: this.alsoStoreId,
					rentalType: this.rentalType,
					takeLat: this.takeLat, //取车经度
					takeLon: this.takeLon, //取车纬度
					alsoLat: this.alsoLat, //还车经度
					alsoLon: this.alsoLon, //还车纬度
				}).then(res => {
					uni.$emit('chooseCarPlan', {
						carInfo: this.carInfo,
						costInfo: res.data
					});
					uni.navigateBack({

					})
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.topWrapper {
		background-color: #fff;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 80rpx;
		.searchBox {
			padding: 20upx;
			display: flex;
			align-items: center;
			background-color: #fff;

			.city {
				font-size: 30upx;
				font-weight: bold;
				color: #333;
			}

			.search {
				flex: 1;
				padding: 0 20upx;
				margin: 0 20upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24upx;
				background-color: #ededed;
				border-radius: 8upx;
			}
		}
	}

	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		padding: 10rpx;
	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.text-warn {
		font-size: 24rpx;
		color: red;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: yellow;
	}

	/deep/ .u-radio-group--row {
		display: inline !important;
	}

	/deep/ .u-radio {
		flex-direction: row-reverse !important;
	}

	.planWrapper {
		padding: 40upx;

		.planTitle {
			color: #333;
			font-size: 30upx;
			font-weight: bold;
			margin-bottom: 30upx;
		}

		.planListBox {
			max-height: 680upx;

			.planList {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				height: 180upx;
				border-radius: 20upx;
				padding: 20upx;
				margin-top: 20upx;
				background-color: #F2F2F2;


				.name {
					color: #333;
					font-size: 24upx;
				}

				.price {
					font-size: 36upx;
					font-weight: bold;
					color: #EC4863;
					position: relative;
					top: -20upx;

					&:before {
						content: '¥';
						font-size: 24upx;
					}
				}

				.remark {
					color: #999;
					font-size: 20upx;
				}

				&.active {
					background-color: $uni-color-primary;

					text {
						color: #fff;
					}
				}
			}
		}
	}
</style>
